<template>
  <div class="menu-con">
    <transition name="fade">
      <div v-if="show" class="mask" @click="hideBottomMenu"></div>
    </transition>
    <transition name="fly2">
        <div class="bottom-menu" v-if="show">
          <div class="title"><b>{{type}}</b><span>{{title}}</span></div>
          <div v-for="(item ,index) in btnList" class="btn-list" :key="index">
             <i :class="[item.icon?item.icon:'icon-music']"></i>
             <div class="btn">
               {{item.name}}
             </div>
          </div>
        </div>
    </transition>
  </div>
</template>

<script>
  import store from '../../store'
  export default {
    name: "bottom-menu",
    computed:{
      show(){
        return store.getters.getBottomMenuShow;
      },
      type(){
        let temp = store.getters.getBottomMenuTitle.split(':');
        return  temp.length > 1 ? temp[0] + " " : '';
      },
      title(){
        let temp = store.getters.getBottomMenuTitle.split(':');
        return temp.length > 1 ? temp[1] : temp[0];
      },
      btnList(){
        return store.getters.getBobbomMenuBtnInfo;
      }
    },
    methods:{
      hideBottomMenu(){
        console.log("xx")
        store.dispatch('set_bottomMenuShow',false);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../../../static/style/public';
  $iconSize:20px;
  $fontSize:15px;
  $btnListHeight:40px;
  $titleHeight:20px;
  .menu-con{
  }
  .mask{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:$bottomHeight;
    z-index: 100;
    background-color: $maskBackground;
    &.fade-enter-to,&.fade-leave-to{
      transition:opacity 0.5s;
    }
    &.fade-enter{
      opacity: 0;
    }
    &.fade-enter-to{
      opacity:1;
    }
    &.fade-leave-to{
      opacity:0;
    }
  }
  .bottom-menu{
    display: flex;
    flex-direction: column;
    position:fixed;
    left:0px;
    right:0px;
    bottom:$bottomHeight;
    padding:20px;
    z-index: 101;
    background-color: white;
    .title{
      display: flex;
      align-items: stretch;
      height:20px;
      font-size:12px;
      b{
        font-size:16px;
      }
      span{
        padding:0 10px;
        color:$grey;
        line-height: $titleHeight;
      }
    }
    .btn-list{
      display: flex;
      position:relative;
      height:$btnListHeight -1px;
      line-height: $btnListHeight;
      i{
        margin-right:20px;
        font-size: $iconSize;
        color:$primaryColor;
        line-height: $btnListHeight;
      }
      .btn{
        position:absolute;
        left:$btnListHeight;
        top:0px;
        right:0px;
        height:$btnListHeight;
        border-bottom: 1px solid $lightGrey;
        font-size:$fontSize;
      }
    }

    &.fly2-enter-to,&.fly2-leave-to{
      transition:all 0.8s;
    }
    &.fly2-enter{
      transform: translate3d(0,150%,0);
    }
    &.fly2-leave-to{
      transform:translate3d(0,150%,0);
    }
  }

</style>